/**
 * 地图右边栏
 */
import React, { Component } from 'react';
import { Link } from 'dva/router';
import cass from 'classnames';
import { Pagination, Table } from 'antd';
import { getDeviceMapDetail, query } from '../../../services/device';
import { isSuccess } from '../../../configs/error';
import css from './style.less';

const deviceStatus = {
	在线: 'onLine',
	离线: 'offLine',
	使用中: 'working',
	空闲: 'onLine',
	禁用: 'offLine',
	故障: 'fault',
	待机: 'onLine',
	正常: 'onLine'
};

const columns = [
	{
		title: '状态',
		dataIndex: 'workStatusDesc',
		key: 'workStatusDesc',
		render: (status, record) => <div className={cass('c', deviceStatus[status], deviceStatus[record.onlineStatus])} />
	},
	{
		title: '设备MAC',
		dataIndex: 'mac',
		key: 'mac'
	},
	{
		title: '操作',
		key: 'sno',
		dataIndex: 'sno',
		render: (sno) => <Link to={`/deviceList/${sno}`}>详情</Link>,
	}
];

class Sidebar extends Component {
	state = {
		faultCount: 0,
		freeCount: 0,
		offlineCount: 0,
		usingCount: 0,
		list: [],
		queryData: {
			begin: 1,
			currentPage: 1,
			pagesize: 10
		}
	}

	componentWillMount() {
		this.query();
		this.pageQuery();
	}

	componentWillReceiveProps(nextProps) {
		if (nextProps.id !== this.props.id) {
			this.setState({
				queryData: {
					begin: 1,
					currentPage: 1,
					pagesize: 10
				}
			});
		}
	}

	componentDidUpdate(prevProps, prevState) {
		if (prevProps.id !== this.props.id) this.query();
		if (this.state.queryData !== prevState.queryData) this.pageQuery();
	}

	async query() {
		const { id } = this.props;
		const res = await getDeviceMapDetail(id);
		if (isSuccess(res)) {
			delete res.data.id;
			this.setState(res.data);
		}
	}

	async pageQuery() {
		const { id, data } = this.props;
		const { queryData } = this.state;
		const res = await query({
			...queryData,
			query: { ...data, deviceLaunchAreaId: id }
		});
		if (isSuccess(res)) {
			this.setState({
				total: res.data.total,
				list: res.data.records
			});
		}
	}

	pageChange = page => {
		const { queryData } = this.state;
		this.setState({
			queryData: { ...queryData, current: page }
		});
	}

	render() {
		const { faultCount, freeCount, offlineCount, usingCount, total, list } = this.state;
		const { deviceCount } = this.props;
		return (
			<div className={'main'} id="deviceMapSidebar">
				<div className={cass('div', 'bb')}>
					<h3 className={'title'}>设备数<small className={'small'}>(台)</small></h3>
					<div className={'text'}>
						<div className={cass('c', deviceStatus['空闲'])} />
						<span className={'span'}>空闲：{freeCount}</span>
					</div>
					<div className={'text'}>
						<div className={cass('c', deviceStatus['使用中'])} />
						<span className={'span'}>使用中：{usingCount}</span>
					</div>
					<div className={'text'}>
						<div className={cass('c', deviceStatus['故障'])} />
						<span className={'span'}>故障：{faultCount}</span>
					</div>
					<div className={'text'}>
						<div className={cass('c', deviceStatus['离线'])} />
						<span className={'span'}>离线：{offlineCount}</span>
					</div>
				</div>
				<div className={'div'}>
					<h3 className={'title'}>设备列表<small className={'small'}>{`共${deviceCount}台`}</small></h3>
					<div className={'tableView'}>
						<Table
							dataSource={list}
							columns={columns}
							size="small"
							rowKey="mac"
							pagination={{
								total,
								onChange: this.pageChange
							}}
							showHeader={false}
						/>
					</div>
				</div>
			</div>
		);
	}
}

export default Sidebar;
